<script type="text/javascript">
    
    var directrices = [$('#inputPOP').val(), $('#inputPromocionAdicional').val(), $('#inputExhibicion').val(), $('#inputZonaCaliente').val()]; 
     
    $(document).ready(function(){
        
        $('#mensajesOcultos').hide();
        $('#imgValidacion').hide();
        
        $('#articuloRegistrados').hide();
        $("#range").mousemove( function(e){
         
            $("#frentes").val($("#range").val());
        });
        
        $("#frentes").change( function(e){
         
            $("#range").val($("#frentes").val());
        });
        
        $("#cmbFamilia").change(function(evento){
            cargarEncadenadosFamilias();
            
                        
        });
       
        //////////////////////////////////////////////////////////////////////////
        ///////Fin del codigo para mostrar marcas...//////////////////////////
        ////////////////////////////////////////////////////////////////////////// 
       
        $( "#presencia" ).on( "click", function() {
            alert( $( "input:checked" ).val() + " is checked!" );
        });
        
        $('#btnCambiar').on( "click", function() {
            $('#articuloTable').show();
        });
        
        $('#btnVer').on( "click", function() {
            
            cargarArticulosRegistrados();
            $('#articuloRegistrados').show();
            
        });
        
        $('.btnEsconder').on( "click", function() {
            $('#articuloRegistrados').hide();
            $('#articuloTable').hide();
        });
        
        
        $('#cmbMarcas').on('change', function() {        
        
            findStatus("limpiar");
        
            ValidaUbicacionCompleta();
        });
        
        $('#btnOk').on( "click", function() {
            RegistraDirectriz();
        });     
        
        
        
        
    });
    
    
    
    
    function CheckFamilia(familia,descripcion)
    {
        //alert($codArticulo);
        $('#divChoicesBrands').hide();
        $('#idMarca').val(familia);    
        
        $('#descripcion').val(descripcion);
        //$('#nombreMarca').show();
        
        $('.btnselectFamilias').attr('checked', false); // Unchecks it
        
         
    }
    
    function cargarArticulosRegistrados()
    {
        $('#bodyArticulosRegistrados').each(function() {
            $(this).empty();
        });
        var accion ='cargarArticulosRegistrados';
        
        
        $.get("controladores/ajaxControlador.php",{accion:accion},function(resultado){
            if(resultado == false)
            {
                alert("Error al cargar los art&iacute;culos registrados.");
            }
            else
            {  
                $('#bodyArticulosRegistrados').append(resultado);
            }
            $('#thArticulo').click();
        });
        
    }
    function cargarEncadenadosFamilias()
    {       
        
        $('#bodyEncadenadosTable').each(function() {
            $(this).empty();
        });
        var accion ='cargarEncadenadosFamilia';
        
        var familia = $('#cmbFamilia').val();
        $.get("controladores/ajaxControlador.php",{accion:accion,familia:familia},function(resultado){
            if(resultado == false)
            {
                alert("Error al cargar los encadenados.");
            }
            else
            {  
                $('#bodyEncadenadosTable').append(resultado);
            }
            $('#thDescripcion').click();
        });
        $('#articuloTable').show();
    
    }
    
    function CheckArticulo(articulo, descripcion)
    {
       
        $('#lblArticulo').html(descripcion);
        $('#articulo').val(articulo);
        $('#articuloTable').hide();
    }
    
    function RegistraPresencia(articulo)
    {
        var accion = 'registraPresencia';
        
        var presencia = confirm('¿El artículo "'+articulo+'" esta?');
                             
        if(presencia)
        {    
            $.get("controladores/ajaxControlador.php",{accion:accion,articulo:articulo,presencia:presencia},function(resultado){
                if(resultado == false)
                {
                    alert("Error al registrar la presencia del artículo.");
                }
                else
                {  
                    $('#img'+articulo).attr("src", "img/check.png");
                    
                }

            });
            
        }  
    }
    
    function EliminaRegistro(idRegistro,codArticulo)
    {
        var accion = 'elimnarRegistro';
        
        var presencia = confirm('¿Seguro(a) que desea elimiar el registro del artículo "'+codArticulo+'"?');
                           
        if(presencia)
        {    
            $.get("controladores/ajaxControlador.php",{accion:accion,idRegistro:idRegistro,codArticulo:codArticulo},function(resultado){
                if(resultado == false)
                {
                    alert("Error al registrar la presencia del artículo.");
                }
                else
                {  
                    //$('#img'+articulo).attr("src", "img/check.png");
                    cargarArticulosRegistrados();
                }

            });
            
        }
        
    }
    
    function ValidaUbicacionCompleta()
    {
        var accion = "selectRegistroUbicacion"
        
        var directriz = "";
        var familia = $('#cmbMarcas').val();
        
        var index;
        var directrices = [$('#inputPOP').val(), $('#inputPromocionAdicional').val(), $('#inputExhibicion').val(), $('#inputZonaCaliente').val()];
        
        for(index = 0; index < directrices.length; index++) 
        {
              
           
            directriz = directrices[index];
            
            $.get("controladores/ajaxControlador.php",{accion:accion,directriz:directriz,familia:familia},function(resultado){
                //alert("entro");
                imprimirMensaje("Se cargo la información")
                if(resultado == false)
                {
                    alert("Error al validar la ubicación.");
                }
                else
                {   // Esta fraccion de codigo es requerida para mostrar los cambios en los checkbox
                     $('#divCompetenciaUbicacion').append(resultado);                    
                    
                }

            });
            
            
        }
        
        //DataTable dtPOP = methods.selectRegistroUbicacion(lblPOP.Text, strCODCliente,  cboFamilia2.SelectedValue.ToString(), strCodAgente);
        //DataTable dtZona = methods.selectRegistroUbicacion(lblZonaCaliente.Text, strCODCliente,  cboFamilia2.SelectedValue.ToString(), strCodAgente);
        //DataTable dtPromocion = methods.selectRegistroUbicacion(lblPromocion.Text, strCODCliente,  cboFamilia2.SelectedValue.ToString(), strCodAgente);
        //DataTable dtExhibicion = methods.selectRegistroUbicacion(lblExibicion.Text, strCODCliente,  cboFamilia2.SelectedValue.ToString(), strCodAgente);
                
    }
    
    function RegistraDirectriz()
    {
        var accion = 'registraDirectriz';
        
        var index;
        var directrices = [$('#inputPOP').val(), $('#inputPromocionAdicional').val(), $('#inputExhibicion').val(), $('#inputZonaCaliente').val()];
        var familia = $('#cmbMarcas').val();
        var estado = "";
        var frentes = $('#frentes').val();
        
        
        for(index = 0; index < directrices.length; index++) 
        {
            
            estado = findStatus(directrices[index]);
            
            $.get("controladores/ajaxControlador.php",{accion:accion,directriz:directrices[index],familia:familia,estado:estado,frentes:frentes},function(resultado){
                    
                    if(resultado == false)
                    {
                        alert("Error al validar la ubicación.");
                    }
                    else
                    {  
                        imprimirMensaje("Se cargo la información")
                        

                    }

                });
        }
    }
    
    function findStatus(directriz, parmStatus)
    {
        var status;
        
        switch(directriz)
        {
            case $('#inputPOP').val():
                status = $('#POP').is(":checked") == true ? 1 : 0;
                if(parmStatus == 1 && parmStatus != "") 
                    $('#POP').attr('checked', true);
                else
                    $('#POP').attr('checked', false);
                break;        
            case $('#inputZonaCaliente').val():
                status = $('#zonaCaliente').is(":checked") == true ? 1 : 0;
                 if(parmStatus == 1 && parmStatus != "")
                 $('#zonaCaliente').attr('checked', true);
                 else
                    $('#zonaCaliente').attr('checked', false);
                break;
            case $('#inputPromocionAdicional').val():
                status = $('#promocionAdicional').is(":checked") == true ? 1 : 0;            
                if(parmStatus == 1 && parmStatus != "") 
                    $('#promocionAdicional').attr('checked', true);
                else
                    $('#promocionAdicional').attr('checked', false);
                break;
            case $('#inputExhibicion').val():
                status = $('#exhibicion').is(":checked") == true ? 1 : 0;            
                if(parmStatus == 1 && parmStatus != "") 
                    $('#exhibicion').attr('checked', true);
                else
                    $('#exhibicion').attr('checked', false);
                break;
            case "limpiar":
                $('#POP').attr('checked', false);
                $('#zonaCaliente').attr('checked', false);
                $('#promocionAdicional').attr('checked', false);
                $('#exhibicion').attr('checked', false);
                $('#frentes').val(0);
                $('#range').val(0);
                break;
            
        } 
        
        
        return status;
        
    }
    
    function guardarRespuestaDirectriz(idDirectriz)
    {
        var respuesta = $('#Respuesta'+idDirectriz).is(":checked") == true ? 1 : 0;
        
        var accion = 'insertPlanimetriaDirectrices';
        
        $.get("controladores/ajaxControlador.php",{accion:accion,idDirectriz:idDirectriz,respuesta:respuesta},function(resultado){
                //alert("entro");
                
                if(resultado == false)
                {
                    alert("Error al guardó la información.");
                }
                else
                {   // Esta fraccion de codigo es requerida para mostrar los cambios en los checkbox
                     $('#tr'+idDirectriz).css('background-color', '#A9F5A9');
                     imprimirMensaje("Se guardó la información correctamente.");
                     $('#mensajesOcultos').append(resultado);
                     
                     //td.attr(bgcolor, "#00FF00");
                    
                }
                 
            });
            
            $("#load").css("display","none");
    }
        
</script>
<ul class="breadcrumb">
    <li><a href="index.php">Inicio</a> <span class="divider">&raquo;</span></li>
    <li><a href="index.php?accion=paginaPrincipal">Men&uacute; principal</a> <span class="divider">&raquo;</span></li>
    <li><a href="index.php?accion=listarClientesXDia&controlador=cliente">Cliente selecci&oacute;n</a> <span class="divider">&raquo;</span></li>
    <?php echo "<li><a href=index.php?accion=MenuClienteSeleccion&id=" . $_SESSION['IdCliente'] . "&tipoCliente=" . $_SESSION['TipoCliente'] . ">Men&uacute; cliente</a> <span class='divider'>&raquo;</span></li>" ?>
    <li><a href="index.php?accion=MenuSupervisor">Men&uacute; supervisor</a> <span class="divider">&raquo;</span></li>
    <li class="active">Competencia</li>
</ul>


<!-- ===================================== END HEADER ===================================== -->
<div id="mensajesOcultos"></div>
<div class="col_12">
    <div class="col_12">
        <h3 style="color:#999;margin-bottom:10px;" class="center">Competencia</h3>
    </div>    
    <!-- Tabs Center -->
    <ul class="tabs left">
        <li><a href="#tabc1"><i class="icon-folder-open"></i>Ubicaci&oacute;n</a></li>
        <li><a href="#tabc2"><i class="icon-folder-open"></i>Precio</a></li>
        <li><a href="#tabc3"><i class="icon-folder-open"></i>Planimetria</a></li>
    </ul>
    <form name="competencia" id="competencia" method="post" action="index.php?accion=insertArticuloCompetencia&controlador=cliente">
        <div id="tabc1" class="tab-content">

            <input type="hidden" value="" id="hddEstado">

            <div class="col_12">


                <section id="cbcMarcas"> 
                    <label for="cmbMarcas">Marcas:</label>
                    <select id="cmbMarcas" name="cmbMarcas" tabindex="1" class="selmenu">
                        <option value="0">Selecciona Una...</option>
                        <?php
                        if (sizeof($itemsMarcas) > 0) {
                            foreach ($itemsMarcas as $item) {
                                $codFamilia = $item['CodFamilia'];
                                $descripcion = $item['Descripcion'];
                                echo "<option value='$codFamilia'>$descripcion - $codFamilia</option>";
                            }
                        }
                        ?> 
                    </select>
                    <img name ="imgValidacion" id="imgValidacion" src='img/check.png'/>
                </section>




            </div>

            
                <div class="col_12">                

                    <label for="frentes">Frentes:</label>
                    <input id="range" name="range" type="range" min="0" max="50" value="0" step="1">
                    <input type="number" name="frentes" id="frentes"  autocomplete="off" max="50"min="0" value="0" tabindex="2" class="txtinput" style="width:50px;height:23px;font-weight:bold;">

                </div>
            <div id="divCompetenciaUbicacion">
                <div class="col_6">
                    <section id="rdbPOP">
                        <input type="hidden" value="POP" id="inputPOP">
                        <label for="POP">POP:</label>
                        <div class="iphone-toggle-buttons">
                            <label for="POP"><input type="checkbox" value="1" name="POP" id="POP" /><span>POP</span></label>
                        </div>

                    </section>
                </div>

                <div class="col_6">

                    <section id="rdbZonaCaliente">
                        <input type="hidden" value="Zona Caliente" id="inputZonaCaliente">
                        <label for="zonaCaliente">Zona Caliente:</label>
                        <div class="iphone-toggle-buttons">
                            <label for="zonaCaliente"><input type="checkbox" name="zonaCaliente" id="zonaCaliente" /><span>zonaCaliente</span></label>
                        </div>

                    </section>
                </div>
                <div class="col_6">
                    <section id="rdbPromocionAdicional">
                        <input type="hidden" value="Promoci&oacute;n Adicional" id="inputPromocionAdicional">
                        <label for="promocionAdicional">Promoci&oacute;n Adicional:</label>
                        <div class="iphone-toggle-buttons">
                            <label for="promocionAdicional"><input type="checkbox" name="promocionAdicional" id="promocionAdicional" /><span>POP</span></label>
                        </div>

                    </section>
                </div>
                <div class="col_6">
                    <section id="rdbExhibicion">
                        <input type="hidden" value="Exhibici&oacute;n" id="inputExhibicion">
                        <label for="exhibicion">Exhibici&oacute;n:</label>
                        <div class="iphone-toggle-buttons">
                            <label for="exhibicion"><input type="checkbox" name="exhibicion" id="exhibicion" /><span>Exhibici&oacute;n</span></label>
                        </div>

                    </section>
                </div>
            </div>  <!-- Fin de divCompetenciaUbicacion -->  

            <!-- Pill -->
            <div class="col_4">
                <button id="btnOk" class="blue pill"><i class="icon-star"></i> OK</button>
            </div> 

        </div> <!-- Fin de tabc1 -->

        <div id="tabc2" class="tab-content">

            <section id="cbcFamilia"> 
                <label for="cmbFamilia">Familia:</label>
                <select id="cmbFamilia" name="cmbFamilia" tabindex="2" class="selmenu">
                    <option value="0">Selecciona Uno...</option>
                    <?php
                    if (sizeof($itemsFamilias) > 0) {
                        foreach ($itemsFamilias as $item) {
                            $codFamilia = $item['CodFamilia'];
                            $descripcion = $item['Descripcion'];
                            echo "<option value='$codFamilia'>$descripcion - $codFamilia</option>";
                        }
                    }
                    ?> 
                </select>
            </section>

            <br/>



            <label  id="lblArticulo" for="articulo">Art&iacute;culo:</label>                    
            <input  type="text" name="articulo" id="articulo"  autocomplete="off" tabindex="2" readonly>                

            <input  type="button" id="btnCambiar" value="Cambiar Art&iacute;culo"/>

            <br/>
            <div id="articuloTable" class="col_12">
                <h3 style="color:#999;margin-bottom:10px;" class="center">Art&iacute;culos Competencia</h3>
                <div class="tab-pane active" id="demo">

                    <p>
                        Busqueda: <input id="filterArticulo" type="text" tabindex="3"/>
                        <!--Plazo:
                        <select class="filter-status">
                            <option></option>
                            <option value="N">N</option>
                            <option value="S">S</option>
                            
                        </select>-->
                        <a href="#clear" class="clear-filter" title="Limpiar filtro"><i class="icon-rss"></i> Limpiar</a>
                        <span class="row-count"></span>
                    </p>
                    <table class="table demo" data-filter="#filterArticulo" data-page-size="10">
                        <thead>
                            <tr>
                                <th data-toggle="true">
                                    Articulo
                                </th>
                                <th id="thDescripcion" data-toggle="true">
                                    Descripci&oacute;n
                                </th>
                                <th data-toggle="true">
                                    Registrado
                                </th>

                            </tr>
                        </thead>
                        <tbody id="bodyEncadenadosTable">

                            <!--Aqui se insertan lo tr generados por jquery mediante el metodo cargarEncadenados()-->

                        </tbody>
                        <tfoot class="hide-if-no-paging">
                            <tr>
                                <td colspan="12">
                                    <div class="pagination pagination-centered"></div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <div class="iphone-toggle-buttons">
                <label for="precio">Precio:</label>                    
                <input type="number" name="precio" id="precio"  autocomplete="off"  min="0" step="any" tabindex="4" class="txtinput"> 
                <section id="rdbVisible">
                    <label for="visible">Visible :</label>
                    <div class="iphone-toggle-buttons">
                        <label for="visible"><input type="checkbox" value="1" name="visible" tabindex="6" id="visible" /><span>Visible</span></label>

                        <input type="button" id="btnVer" class="blue" value="Ver"/>
                    </div>
                </section>
            </div>

            <div id="articuloRegistrados">

                <div id="articuloTable" class="col_12">
                    <h3 style="color:#999;margin-bottom:10px;" class="center">Art&iacute;culos Registrados</h3>
                    <div class="tab-pane active" id="demo2">

                        <p>
                            Busqueda: <input id="filterArticuloRegistrados" type="text" tabindex="7"/>
                            <!--Plazo:
                            <select class="filter-status">
                                <option></option>
                                <option value="N">N</option>
                                <option value="S">S</option>
                                
                            </select>-->
                            <a href="#clear" class="clear-filter" title="Limpiar filtro"><i class="icon-rss"></i> Limpiar</a>
                            <span class="row-count"></span>
                            <input type="button"  class="btnEsconder" value="Esconder"/>
                        </p>
                        <table class="table demo" data-filter="#filterArticuloRegistrados" data-page-size="10">
                            <thead>
                                <tr>
                                    <th id="thArticulo" data-toggle="true">
                                        Art&iacute;culo
                                    </th>
                                    <th data-toggle="true">
                                        Precio
                                    </th>
                                    <th data-toggle="true">
                                        Visible
                                    </th>
                                    <th data-hide="phone">
                                        Fecha
                                    </th>
                                    <th data-toggle="true">
                                        Eliminar
                                    </th>

                                </tr>
                            </thead>
                            <tbody id="bodyArticulosRegistrados">

                                <!--Aqui se insertan lo tr generados por jquery mediante el metodo cargarArticulosRegistrados()-->

                            </tbody>
                            <tfoot class="hide-if-no-paging">
                                <tr>
                                    <td colspan="12">
                                        <div class="pagination pagination-centered"></div>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>

            </div>


            <div class="col_12">

                <br/>

                <div class="col_6">
                    <button id="btnRegistrar"> Registrar</button>
                </div>        
            </div>

        </div> <!-- Fin de tabc2 -->

        <div id="tabc3" class="tab-content">
            <div class="col_12">
    
    
                
                    <div class="tab-pane active" id="directrices">
                        
                        <p>
                            Busqueda: <input id="filterDirectrices" type="text"/>
                            <!--Plazo:
                            <select class="filter-status">
                                <option></option>
                                <option value="N">N</option>
                                <option value="S">S</option>
                                
                            </select>-->
                            <a href="#clear" class="clear-filter" title="clear filter"><i class="icon-rss"></i> Limpiar</a>
                            <span class="row-count"></span>
                        </p>
                        <table class="table demo" data-filter="#filterDirectrices" data-page-size="10">
                                            <thead>
                                                <tr>
                                                <th data-hide="phone">
                                                    Directriz
                                                </th>
                                                <th data-toggle="true">
                                                    Descripci&oacute;n
                                                </th>
                                                <th data-toggle="true">
                                                    Respuesta
                                                </th>
                                                <th data-toggle="true">
                                                    Guardar
                                                </th>
                                                
                                                
                                                </tr>
                                            </thead>
                                            <tbody>
                                              
                                            <?php //$fila =1;
                                                foreach($itemDirectices as $item){ 
                                                
                                            //$MontoPagar = number_format($item['MontoPagar'],2);
                                            //$MontoPagar = $item['MontoPagar'];
                                            ?>    
                                            <tr id="tr<?php echo $item['IdDirectriz']?>">
                                                <td><?php echo $item['IdDirectriz']?></td>
                                                <td><?php echo $item['Descripcion']?></td>
                                                <td>
                                                    <section id="rdbRespuesta<?php echo $item['IdDirectriz']?>">                                                     
                                                        
                                                        <div class="iphone-toggle-buttons">
                                                            <label for="Respuesta<?php echo $item['IdDirectriz']?>"><input type="checkbox" value="1" name="Respuesta<?php echo $item['IdDirectriz']?>" id="Respuesta<?php echo $item['IdDirectriz']?>" /><span>Respuesta<?php echo $item['IdDirectriz']?></span></label>
                                                        </div>
                                                    </section>    
                                                </td>
                                                <td onClick="guardarRespuestaDirectriz(<?php echo $item['IdDirectriz']?>,this)"><img alt="Guardar" name="imgSave" id="imgSave" src='img/save.png'/></td>
                                                
                                                
                                            </tr>
                                            <?php 
                                                } //Cierre del for
                                            ?>
                                            
                                            </tbody>
                                            <tfoot class="hide-if-no-paging">
                                            <tr>
                                                <td colspan="12">
                                                    <div class="pagination pagination-centered"></div>
                                                </td>
                                            </tr>
                                            </tfoot>
                                    </table>
                    </div>

        </div>
        </div> <!-- Fin de tabc3 -->
    </form>
</div>
